<template>
    <div class="element element--article video now-playing" v-for="(item, index) in videoData" :key='index'
        @click="changeVideo(item)">
        <figure class="afigure">
            <span class="arlength">{{ item.time }}</span>
            <router-link class="figimage">
                <img class="lazyautosizes lazyloaded" data-sizes="auto" alt="Go to video" :data-srcset="item.src"
                    sizes="110px" :srcset="item.src">
                <i class="icon  icon--play"></i>
            </router-link>
        </figure>
        <div class="article__content over-video">
            <h3 class="arh3">
                <router-link class="link" :to="{ path: '/videoDetail', query: { id: item.id } }">
                    {{ item.title }}
                </router-link>
            </h3>
            <p class="article__summary"></p>
        </div>
    </div>
</template>
<script setup>
const props = defineProps(['videoData'])
const emit = defineEmits(['changeVideo'])
const changeVideo = (item) => {
    console.log(item, 'item')
    emit('changeVideo', item)
}
</script>
<style lang="scss" scoped>
.now-playing {
    background: hsla(0, 0%, 100%, .12);
    border-right: none;
    box-shadow: inset 2px 0 0 0 #3677a8;
    margin: 0;
    padding: 10px;
    border-bottom: 1px solid #202020;
    border-top: none;
    position: relative;
    display: flex !important;

    .afigure {
        max-width: 110px;
        position: relative;
        margin-right: 10px;
        width: 100%;

        .arlength {
            position: absolute;
            bottom: 10px;
            right: 10px;
            z-index: 5;
            padding: 0 5px 1px;
            background-color: rgba(32, 32, 32, .9);
            border-radius: 2px;
            color: #fff;
        }

        .figimage {
            position: relative;
            display: block;
            overflow: hidden;
            padding-bottom: 56.25%;

            img {
                position: absolute;
                top: 0;
                width: 100%;
            }
        }

        .figimage:before {
            opacity: 1;
            background: linear-gradient(0deg, rgba(0, 0, 0, .2) 0, rgba(0, 0, 0, .1));
            content: "";
            position: absolute;
            z-index: 1;
            display: block;
            width: 100%;
            height: 100%;
            transition: opacity .4s ease-in-out;
        }

        .figimage:after {
            opacity: 0;
            background: linear-gradient(180deg, rgba(0, 0, 0, .2) 0, rgba(0, 0, 0, .1));
        }
    }
}

.over-video {
    display: flex;
    margin: 0;
    z-index: 6;
    position: relative;

    .arh3 {
        background: none;
        padding: 0;
        width: 100%;
        color: #fff;
        font: 600 0.813rem / 1.125 Mulish, sans-serif;
    }
}
</style>